<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="消息字段" width="900px" @ok="handleSubmit">
    <BasicTable @register="registerTable" :rowSelection="rowSelection" style="padding: 0px;" >
      <!-- <template #form-addUser="{ model, field }">
        <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
      </template> -->
    </BasicTable>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {reactive, ref, toRaw, unref} from 'vue';
import {BasicDrawer, useDrawerInner} from '/@/components/Drawer';
import {BasicTable, useTable} from '/@/components/Table';
import {msgFieldColumns} from './task.data';
import {listMsgField} from './task.api';
// 声明Emits
const emit = defineEmits(['select', 'register']);
const checkedKeys = ref<Array<string | number>>([]);
const state = reactive({
  taskId: '',
})
//注册table数据
const [registerTable, { reload, getSelectRows }] = useTable({
  api: listMsgField,
  beforeFetch: (params) => {
    params.taskId = state.taskId
  },
  rowKey: 'id',
  immediate: false,
  columns: msgFieldColumns,
  striped: true,
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  canResize: false
})

/**
 * 选择列配置
 */
const rowSelection = {
  type: 'checkbox',
  columnWidth: 50,
  selectedRowKeys: checkedKeys,
  onChange: onSelectChange
}

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  state.taskId = data?.taskId
  reload()
});

/**
 * 选择事件
 */
function onSelectChange(selectedRowKeys: (string | number)[]) {
  checkedKeys.value = selectedRowKeys;
}

//提交事件
async function handleSubmit() {
  const selectRows = await getSelectRows().filter(e => checkedKeys.value.includes(e.id))
  setDrawerProps({ confirmLoading: true });
  //关闭弹窗
  closeDrawer();
  //刷新列表
  emit('select', toRaw(unref(selectRows)));
  setDrawerProps({ confirmLoading: false });
}

</script>
